<template>
	<view class="incomeDetail">
		<!--组件-->
		<swiperNavBar
			:scrollIntoView="0"
			:swiperTabList='swiperTabList'
			:activeTabIdx='activeTabIdx'
			currentSwiperWidth="25%"
			:currentSwiperHeight="80"
			swiperCurrentSize='26rpx'
			swiperColor='#1A1A1A'
			swiperCurrentColor='#2989FD'
			:currentSwiperLineShow="true"
			currentSwiperLineActiveWidth="100rpx"
			currentSwiperLineActiveHeight="6rpx"
			currentSwiperLineActiveBg="#2989FD"
			:currentSwiperLineAnimatie="300"
			swiperBgColor="#FFF"
			@change="switchTab">
		</swiperNavBar>


		<view class="income_warps">
			<view
				class="income_item_b f f_align f_align_center"
				v-for="(item,index) in myIncomeList"
				:key="index"
			>
				<view class="f f_column">
					<view class="bold">{{$getDict(account_change_business_type,item.accountChangeBusinessType)}}</view>
					<view class="time_c">{{item.createTime}}</view>
				</view>
				<view :class="item.accountTrend== '10000001' ? 'bold add' : 'bold'">
					{{item.accountTrend == '10000002' ? '-' : '+'}}
					{{amountDetail(item)}}
				</view>
			</view>
		</view>

		<!-- 加载 -->
		<loadMore :isLoading="isLoading" :isDone="isDoneTask" />
	</view>
</template>

<script>
	import swiperNavBar from '@/components/swiperNavBar/swiperNavBar.vue'
	import loadMore from '@/components/loadMore/loadMore';
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				swiperTabList: [
					{
						index: 0,
						name: '全部',
						value: ''
					},
					{
						index: 1,
						name: '金币',
						value: '10001001'
					},
					{
						index: 2,
						name: '奖券',
						value: '10001007'
					},
					{
						index: 3,
						name: '余额',
						value: '10001008'
					}
				],
				activeTabIdx: 0,
				accountChangeBusinessType:'',

				isLoading:false,
				isDoneTask:false,

				myIncomeList:[],
				page:{
					pageIndex:1,
					limit:10,
					totalPage:0
				},
			};
		},
		components:{
			swiperNavBar,loadMore
		},
		computed:{
			...mapState({
				account_change_business_type:state=>state.dictArrs.account_change_business_type
			})
		},
		onLoad() {
			this.$store.dispatch('getDictlists','account_change_business_type,account_trend_type')
		},
		onShow() {
			this.init();
		},
		methods:{
			// tab切换
			switchTab (item) {
				this.activeTabIdx = item.index;
				this.accountChangeBusinessType = item.value;
				this.page.pageIndex = 1;
				this.init();
			},
			//查询变更记录
			async init(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;
				let res = (await _this.$http('/api/auth/user/account/change/listAccountChange','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit,
					accountChangeBusinessType:_this.accountChangeBusinessType
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.myIncomeList.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.myIncomeList = _this.myIncomeList.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			},
			//金额 金币判断
			amountDetail(item){
				let str = item.goldCoinAmount+'金币';
				switch (item.accountChangeBusinessType){
					case '10001001': //金币/佣金转化订单
						if(item.goldCoinAmount > 0){
							str = item.goldCoinAmount+'金币';
						}else{
							str = item.raffleTicket+'奖券';
						}
						break;
					case '10001007'://奖券类
						if(item.goldCoinAmount > 0){
							str = item.goldCoinAmount+'金币';
						}else{
							str = item.raffleTicket+'奖券';
						}
						break;
					case '10001008': //提现订单
						str = item.brokerageAmount+'元';
						break;
					case '10001009': //金币/佣金转化订单
						if(item.goldCoinAmount > 0){
							str = item.goldCoinAmount+'金币';
						}else{
							str = item.brokerageAmount+'元';
						}
						break;
				}

				return str;
			}
		},
		onPullDownRefresh() {
			this.page.pageIndex = 1;
			this.init();
		},
		//滚动到底部
		onReachBottom() {
			const _this =this;
			if(_this.page.pageIndex < _this.page.totalPage){
				_this.page.pageIndex++;
				_this.init();
			}else{
				_this.isDoneTask = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.incomeDetail{
		width: 100%;
		min-height: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		padding-top: 1rpx;
		.income_warps{
			padding: 24rpx 24rpx 0;
			.income_item_b{
				border-radius: 8rpx;
				padding: 28rpx;
				border-radius: 8rpx;
				background-color: #fff;
				box-shadow: 0 2rpx 8rpx rgba(32, 134, 252, 0.4);
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: #1A1A1A;
				.time_c{font-size: 22rpx; color: #666;margin-top: 16rpx;}
				.add{
					color: #F74E45;
				}
			}
		}
	}
</style>
